<template>
  <div class="main-content">
    <div class="hot-recommendations">
      <h2 class="section-title">热门推荐</h2>
      <div class="video-grid">
        <el-card v-for="video in hotVideos" :key="video.video_name" class="video-card"
          @click="() => router.push(`/videoshow/${video.video_id}`)">
          <el-image :src="video.img" fit="cover" />
          <div class="video-info">
            <h3 class="video-title">{{ video.video_name }}</h3>
            <p class="video-stats">{{ video.views }} views • {{ video.likes }} likes</p>
          </div>
        </el-card>
      </div>
    </div>
    <div class="latest-hot-videos">
      <h2 class="section-title">最热视频</h2>
      <el-card v-for="video in latestVideos" :key="video.video_name" class="latest-video-card"
        @click="() => router.push(`/videoshow/${video.video_id}`)">
        <div class="latest-video-content">
          <el-image :src="video.img" fit="cover" class="latest-video-thumbnail" />
          <div class="latest-video-info">
            <h3 class="video-title">{{ video.video_name }}</h3>
            <p class="video-stats">{{ video.views }} views</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {
  ElCard,
  ElImage,
  ElDivider
} from 'element-plus';

const router = useRouter();

const hotVideos = ref([]);
const latestVideos = ref([]);

// 获取根据点赞推荐的视频列表
const fetchLikesRecommend = async () => {
  try {
    const response = await fetch('/likesRecommend', { method: 'GET' });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const contentType = response.headers.get('content-type');
    if (!contentType || !contentType.includes('application/json')) {
      throw new Error('Invalid content type, expected application/json');
    }
    const data = await response.json();
    hotVideos.value = data.map(item => ({
      ...item,
      img: item.img, // 使用 img 作为图片源
      video_id: item.video_id, // 确保 id 是 video_id
      video_name: item.video_name, // 使用 video_name 作为标题
      views: item.views,
      likes: item.likes,
    }));
  } catch (error) {
    console.error('Error fetching likes recommend:', error);
  }
};

// 获取根据观看数推荐的视频列表
const fetchViewsRecommend = async () => {
  try {
    const response = await fetch('/viewsRecommend', { method: 'GET' });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const contentType = response.headers.get('content-type');
    if (!contentType || !contentType.includes('application/json')) {
      throw new Error('Invalid content type, expected application/json');
    }
    const data = await response.json();
    latestVideos.value = data.map(item => ({
      ...item,
      img: item.img, // 使用 img 作为图片源
      video_id: item.video_id, // 确保 id 是 video_id
      video_name: item.video_name, // 使用 video_name 作为标题
      views: item.views,
    }));
  } catch (error) {
    console.error('Error fetching views recommend:', error);
  }
};

// 在组件挂载时获取数据
onMounted(() => {
  fetchLikesRecommend();
  fetchViewsRecommend();
});
</script>

<style scoped>
.main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  justify-content: center;
}

.video-card,
.latest-video-card {
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.video-card:hover,
.latest-video-card:hover {
  transform: scale(1.02);
}

/* 当页面宽度小于400px时 */
@media (max-width: 400px) {
  .main-content {
    display: flex;
    flex-direction: column;
  }
}
</style>